<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>系统商品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../css/layuicmspublic.css" media="all">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
		<!--搜索开始-->
        <fieldset class="layui-elem-field layuimini-search">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" id="searchFrm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">供应商</label>
                            <div class="layui-input-inline">
                                <select name="providerid" class="providerSel">
                                    <option value="">请选择供应商</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">商品名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="goodsname" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">生产批号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="productcode" autocomplete="off" class="layui-input">
                            </div>
                        </div>
					</div>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">批准文号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="promitcode" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">商品描述</label>
                            <div class="layui-input-inline">
                                <input type="text" name="description" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">商品规格</label>
                            <div class="layui-input-inline">
                                <input type="text" name="size" autocomplete="off" class="layui-input">
                            </div>
                        </div>
					</div>

					<div class="layui-form-item">
                        <div class="layui-block" style="text-align: center;">
                            <a class="layui-btn " lay-submit=""  lay-filter="data-search-btn"><label class="layui-icon layui-icon-search"></label>搜索</a>
							<a class="layui-btn layui-btn-warm" onclick="javascript:$('#searchFrm')[0].reset()" lay-filter="data-search-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
		<!--搜索结束-->
		
		<!--表格开始-->
        <table class="layui-hide" id="goodsTable" lay-filter="goodsTable"></table>
        <div style="display: none;" id="goodsToolBar">
            <a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete btn_batchdown" lay-event="batchdelete">批量下架</a>
        </div>
		<div style="display: none;" id="goodsTableBar">
            <a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete btn_up layui-bg-blue" lay-event="update">上架商品</a>
		    <a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete btn_down layui-bg-green" lay-event="delete">下架商品</a>
            <a class="layui-btn layui-btn-sm btn_up layui-bg-orange" lay-event="scrap">报废</a>
        </div>

		<!--表格结束-->

        <!-- 添加和修改的弹出层开始 -->
        <div id ="addOrUpdateDiv" style="display: none;padding: 5px;">
            <form method="post" class="layui-form layui-form-pane" lay-filter="dataFrm" id="dataFrm">
                
                <div class="layui-col-md12 layui-col-xs12">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md9 layui-col-xs7">
                            <div class="layui-form-item magt3">
                                <label class="layui-form-label">供应商</label>
                                <div class="layui-input-block">
                                 <select name="providerid" disabled="disabled" class="providerSel">
                                     <option value ="">请选择供应商</option>
                                 </select>
                                </div>
                            </div>
                         <div class="layui-form-item magt3">
                             <label class="layui-form-label">商品名称</label>
                             <div class="layui-input-block">
                                  <input type="hidden" name="id" />
                                 <input type="text" name="goodsname" disabled="disabled" class="layui-input" lay-verify="required" placeholder="请输入商品名称">
                             </div>
                         </div>
                         <div class="layui-form-item magt3">
                             <label class="layui-form-label">商品描述</label>
                             <div class="layui-input-block">
                                 <input type="text" name="description"  class="layui-input" lay-verify="required" placeholder="请输入商品描述">
                             </div>
                         </div>
                        </div>
                        <div class="layui-col-md3 layui-col-xs5">
                            <div class="layui-upload-list thumbBox mag0 magt3">
                             <input type="hidden" name="goodsimg" id="goodsimg" />
                                <img class="layui-upload-img thumbImg">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item magb0">
                        <div class="layui-inline">
                         <label class="layui-form-label">产地</label>
                         <div class="layui-input-inline">
                             <input type="text" name="produceplace" disabled="disabled" class="layui-input " lay-verify="required" placeholder="请输入商品产地">
                         </div>
                     </div>
                     <div class="layui-inline">
                         <label class="layui-form-label">包装</label>
                         <div class="layui-input-inline">
                             <input type="text" name="goodspackage" disabled="disabled" class="layui-input " lay-verify="required" placeholder="请输入商品包装">
                         </div>
                     </div>
                     <div class="layui-inline">
                         <label class="layui-form-label">规格</label>
                         <div class="layui-input-inline">
                             <input type="text" name="size" disabled="disabled" class="layui-input " lay-verify="required" placeholder="请输入商品规格">
                         </div>
                     </div>
                     <div class="layui-inline">
                         <label class="layui-form-label">生产批号</label>
                         <div class="layui-input-inline"> 
                             <input type="text" name="productcode" disabled="disabled" class="layui-input " lay-verify="required" placeholder="请输入商品生产批号">
                         </div>
                     </div>
                     <div class="layui-inline">
                         <label class="layui-form-label">批准文号</label>
                         <div class="layui-input-inline">
                             <input type="text" name="promitcode" disabled="disabled" class="layui-input " lay-verify="required" placeholder="请输入商品批准文号">
                         </div>
                     </div>
                     <div class="layui-inline">
                         <label class="layui-form-label">销售价格</label>
                         <div class="layui-input-inline">
                             <input type="text" name="price" id="price0" class="layui-input " lay-verify="required" placeholder="请输入商品价格">
                         </div>
                     </div>
                     <div class="layui-inline">
                        <label class="layui-form-label">会员价格</label>
                        <div class="layui-input-inline">
                            <input type="text" name="memberprice" id="memberprice0" class="layui-input " lay-verify="required" placeholder="请输入商品库存量">
                        </div>
                    </div>
                     <div class="layui-inline">
                         <label class="layui-form-label">库存量</label>
                         <div class="layui-input-inline">
                             <input type="text" name="number" id="number1" disabled="disabled" class="layui-input " lay-verify="required|number" placeholder="请输入商品库存量">
                         </div>
                     </div>
                     <div class="layui-inline">
                        <label class="layui-form-label">生产时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="productiondate" class="layui-input " disabled="disabled" lay-verify="required" placeholder="请输入商品库存预警值">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">到期时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="expiration" class="layui-input " disabled="disabled" lay-verify="required" placeholder="请输入商品库存预警值">
                        </div>
                    </div>
                     <div class="layui-inline">
                         <label class="layui-form-label">预警值</label>
                         <div class="layui-input-inline">
                             <input type="text" name="dangernum" id="dangernum0" class="layui-input " lay-verify="required|number|checkdangernumber" placeholder="请输入商品库存预警值">
                         </div>
                     </div>
                    </div>
                </div>

             <div class="layui-form-item">
                 <div class="layui-input-block" style="text-align: left;">
                     <a class="layui-btn " lay-submit=""  lay-filter="doSubmit"><label class="layui-icon layui-icon-release"></label>上架</a>
                     <a class="layui-btn layui-btn-warm" onclick="javascript:$('#dangernum0').val(null),$('#price0').val(null),$('#memberprice0').val(null)" lay-filter="data-search-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
                 </div>
              </div>
            </form>
        </div>
        <!-- 添加和修改的弹出层结束 -->

        <!-- 报废商品开始 -->
        <div id ="scrapDiv" style="display: none;padding: 5px;">
            <form method="post" class="layui-form layui-form-pane" lay-filter="scrapDataFrm" id="scrapDataFrm">
                
                <div class="layui-col-md12 layui-col-xs12">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md9 layui-col-xs7">
                            <div class="layui-form-item magt3">
                                <label class="layui-form-label">供应商</label>
                                <div class="layui-input-block">
                                    <input type="hidden" name="providername" id="providername">
                                 <select name="providerid" id="providerid" disabled="disabled" class="providerSel">
                                     <option value ="">请选择供应商</option>
                                 </select>
                                </div>
                            </div>
                         <div class="layui-form-item magt3">
                             <label class="layui-form-label">商品名称</label>
                             <div class="layui-input-block">
                                  <input type="hidden" name="id" />
                                 <input type="text" name="goodsname" id="goodsname" disabled="disabled" class="layui-input" lay-verify="required" placeholder="请输入商品名称">
                             </div>
                         </div>
                         <div class="layui-form-item magt3">
                             <label class="layui-form-label">商品描述</label>
                             <div class="layui-input-block">
                                 <input type="text" name="description" disabled="disabled" class="layui-input" lay-verify="required" placeholder="请输入商品描述">
                             </div>
                         </div>
                        </div>
                        <div class="layui-col-md3 layui-col-xs5">
                            <div class="layui-upload-list thumbBox mag0 magt3">
                             <input type="hidden" name="goodsimg" id="goodsimg" />
                                <img class="layui-upload-img thumbImg">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item magb0">
                        <div class="layui-inline">
                         <label class="layui-form-label">产地</label>
                         <div class="layui-input-inline">
                             <input type="text" name="produceplace" disabled="disabled" class="layui-input " lay-verify="required" placeholder="请输入商品产地">
                         </div>
                     </div>
                     <div class="layui-inline">
                         <label class="layui-form-label">包装</label>
                         <div class="layui-input-inline">
                             <input type="text" name="goodspackage" disabled="disabled" class="layui-input " lay-verify="required" placeholder="请输入商品包装">
                         </div>
                     </div>
                     <div class="layui-inline">
                         <label class="layui-form-label">规格</label>
                         <div class="layui-input-inline">
                             <input type="text" name="size" id="size" disabled="disabled" class="layui-input " lay-verify="required" placeholder="请输入商品规格">
                         </div>
                     </div>
                     <div class="layui-inline">
                         <label class="layui-form-label">生产批号</label>
                         <div class="layui-input-inline"> 
                             <input type="text" name="productcode" disabled="disabled" class="layui-input " lay-verify="required" placeholder="请输入商品生产批号">
                         </div>
                     </div>
                     <div class="layui-inline">
                         <label class="layui-form-label">批准文号</label>
                         <div class="layui-input-inline">
                             <input type="text" name="promitcode" disabled="disabled" class="layui-input " lay-verify="required" placeholder="请输入商品批准文号">
                         </div>
                     </div>
                     <div class="layui-inline">
                         <label class="layui-form-label">库存量</label>
                         <div class="layui-input-inline">
                             <input type="text" name="number" id="number0" disabled="disabled" class="layui-input " lay-verify="required|number" placeholder="请输入商品库存量">
                         </div>
                     </div>
                     <div class="layui-inline">
                        <label class="layui-form-label">生产时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="productiondate" class="layui-input " disabled="disabled" lay-verify="required" placeholder="请输入商品生产时间">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">到期时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="expiration" class="layui-input " disabled="disabled" lay-verify="required" placeholder="请输入商品到期时间">
                        </div>
                    </div>
                     <div class="layui-inline">
                         <label class="layui-form-label">报废数量</label>
                         <div class="layui-input-inline">
                             <input type="text" name="scrapNumber" id="scrapNumber0" class="layui-input " lay-verify="required|checkscrapnumber|number" placeholder="请输入该商品的报废数量">
                         </div>
                     </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">报废原因</label>
                    <div class="layui-input-block">
                        <input type="text" name="remark" id="remark" class="layui-input" lay-verify="required" placeholder="请输入报废原因">
                    </div>
                </div>

             <div class="layui-form-item">
                 <div class="layui-input-block" style="text-align: left;">
                     <a class="layui-btn " lay-submit=""  lay-filter="doSubmit2"><label class="layui-icon layui-icon-release"></label>报废</a>
                     <a class="layui-btn layui-btn-warm" onclick="javascript:$('#scrapNumber0').val(null),$('#remark').val(null)" lay-filter="data-search-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
                 </div>
              </div>
            </form>
        </div>
        <!-- 报废商品结束 -->

    </div>
</div>
<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
<script src="../../../lib/common/common.js" charset="utf-8"></script>

<script>
    layui.use(['form', 'table','laydate','layer','upload'], function () {
        var form = layui.form;
        var table = layui.table;
		var laydate=layui.laydate;
		var layer=layui.layer;
        var upload = layui.upload;

        //加载查询条件里面的供应商的下拉列表
        $.get(api+"provider/getAllAvailableProvider",function(res){
            var search_providerid=$(".providerSel");
            var html = "<option value = ''>请选择供应商</option>";
            var data = res.data;
            $.each(data,function(index,item){
                html += "<option value="+item.id+">"+item.providername+"</option>"
            });
            search_providerid.html(html);
            form.render("select");
        });

      var tableIns=table.render({
            elem: '#goodsTable',
            url: api+'goods/loadAllGoods',
			toolbar:"#goodsToolBar",
			cellMinWidth:true,
            height: "full-200",
            cols: [[
                {type: "checkbox",  fixed: "left",width:80},
                {field: 'id', title: 'ID', align: "center",width:80},
                {field: 'goodsname',  title: '商品名称', align: "center",width:150},
                {field: 'providername',  title: '供应商', align: "center",width:120},
                {field: 'produceplace',  title: '产地', align: "center",width:150},
                {field: 'size',  title: '规格', align: "center",width:120},
                {field: 'goodsimg',  title: '图片', align: "center",width:120,templet:function(d){
                    if(d.goodsimg){
                        return "<img width=30 height=30 src='"+baseUrl+d.goodsimg+"' />";
                    }else{
                        return "";
                    }
                }},
                {field: 'goodspackage',  title: '包装', align: "center",width:150},
                {field: 'productcode',  title: '生产批号', align: "center",width:150},
                {field: 'promitcode',  title: '批准文号', align: "center",width:150},
                {field: 'description',  title: '描述', align: "center",width:180},
                {field: 'price',  title: '价格(￥)', align: "center",width:180},
                {field: 'number',  title: '数量', align: "center",width:180},
                {field: 'dangernum',  title: '预警值', align: "center",width:120},
                {field: 'available',  title: '是否可用', align: "center",width:120,templet:function(d2){
                    if(d2.available == 1){
                        $(".btn_up").hide();
                        $(".btn_down").show();
                        return '<span class="layui-badge layui-bg-green">上架在售</span>'; 
                    }else{
                        $(".btn_down").hide();
                        $(".btn_up").show();
                        return '<span class="layui-badge layui-bg-blue">下架未售</span>'; 
                    }

                }},
                {title: '操作', templet: '#goodsTableBar', fixed: "right", align: "center",width:180}
            ]],
            // where:cols,
            page: true
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
			var params= $("#searchFrm").serialize()
            //执行搜索重载
            table.reload('goodsTable', {
                page: {
                    curr: 1
                }
                ,url:api+'goods/loadAllGoods?'+params
            });
            return false;
        });

		//监听表头的事件
		table.on('toolbar(goodsTable)', function(obj){
            //判断点击的按钮id
		  var checkStatus = table.checkStatus(obj.config.id);
		  switch(obj.event){
		    case 'batchdelete':
                batchdelete();
		    break;
		  };
		});
		
		//监听行数据的事件
        table.on('tool(goodsTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'delete') {
                layer.confirm('真的下架这个商品么？', function (index) {
					$.post(api+"goods/downGoods",{id:data.id},function(res){
						layer.msg(res.msg);
                        tableIns.reload();
						layer.close(index);
					})
                });
            }else if(obj.event === 'update'){
                openUpdateGoods(data);
            }else if(obj.event === 'scrap'){
                openScrapGoods(data);
            }
        });


        //打开上架商品的弹层
        var mainIndex;
        var url;
        function openUpdateGoods(data){
             mainIndex=layer.open({
                 type:1,
                 title:'修改['+data.goodsname+']商品',
                 content:$("#addOrUpdateDiv"),
                 area:['800px','600px'],
                 success:function(index){
                     url=api+"goods/updateGoods";
                     //装载数据表格
                     form.val("dataFrm",data);
                     if(data.goodsimg){
                        $('.thumbImg').attr('src',baseUrl+data.goodsimg);
                     }

                 }
             });
        }

        //提交数据
        form.on("submit(doSubmit)",function(data){
            var params = $("#dataFrm").serialize();
            params += "&available=1";
            layer.confirm('是否上架这个商品？', function (index) {
                $.post(url,params,function(res){
                    layer.msg(res.msg);
                    if(res.code==200){
                        tableIns.reload();
                    }
                    layer.close(mainIndex);
                })
            });
            
            return false;
        })


        //批量下架
        function batchdelete(){
            var checkStatus = table.checkStatus('goodsTable'); //idTest 即为基础参数 id 对应的值
				var data=checkStatus.data;
				var length=checkStatus.data.length;
				if(length==0){
					layer.msg("请选中要下架的商品行数据");
				}else{
					layer.confirm('真的下架选择中这些数据么?', function (index) {
						var params="";
						$.each(data,function(index,item){
							if(index==0){
								params+="ids="+item.id;
							}else{
								params+="&ids="+item.id;
							}
						});
						$.post(api+"goods/batchDownGoods",params,function(res){
							layer.msg(res.msg);
							tableIns.reload();
							layer.close(index);
						})
					});
		        }
		        //layer.msg('批量删除');
        }

        //报废商品
        function openScrapGoods(data){
            mainIndex=layer.open({
                type:1,
                title:'报废['+data.goodsname+']商品',
                content:$("#scrapDiv"),
                area:['800px','600px'],
                success:function(index){
                    url=api+"scrap/scrapGoods";
                    //装置数据表格
                    $('#scrapDataFrm')[0].reset();
                    form.val("scrapDataFrm",data);
                    if(data.goodsimg){
                        $('.thumbImg').attr('src',baseUrl+data.goodsimg);
                    }
                }
            })
        }

        //提交数据
        form.on("submit(doSubmit2)",function(data){
            var params = $("#scrapDataFrm").serialize();
            params += "&providerid="+$("#providerid").val() +"&providername="+$("#providername").val()
            +"&goodsname="+$("#goodsname").val()+"&size="+$("#size").val();
            layer.confirm('是否报废当前商品？注意：此操作不可逆！', function (index) {
                $.post(url,params,function(res){
                    layer.msg(res.msg);
                    if(res.code==200){
                        tableIns.reload();
                    }
                    layer.close(mainIndex);
                })
            });
            
            return false;
        })


        //上传缩略图
        upload.render({
            elem: '.thumbBox',
            url:api+'file/uploadGoodsFile',
            field: "mf",    //设定文件域的字段名
            acceptMime: 'image/*',
            done: function(res,index,upload){
                $('.thumbImg').attr('src',baseUrl+res.data.src);
                $('.thumbBox').css("background","#fff");
                $('.goodsimg').val(res.data.src);
            }
        });

        //自定义校验方式
		form.verify({
			//退货校验
			checkscrapnumber: function(value, item){ //value：表单的值、item：表单的DOM对象
                var str;
                var number0=$("#number0").val();
                if (value-number0 > 0){
                    str = "当前报废的商品数不能大于当前库存商品数";
                }
                if(value <= 0){
                    str = "请输入不小于1的数值";
                }
                return str;
		  	},

            //检查预警值
            checkdangernumber: function(value,item){
                var str;
                var number1=$("#number1").val();
                if (value-number1 > 0){
                    str = "当前设置的预警值不能大于当前库存商品数";
                }
                if(value < 0){
                    str = "请输入不小于0的预警值";
                }
                return str;
            }

		});   

    });


</script>

</body>
</html>